<template>
    <div class="home-box">
        <el-container class="home-container">
            <!-- 头部区域 -->
            <el-header>
                <div>
<!--                    <img src="../assets/car.jpeg"/>-->
                    <span style="font-size: 20px;color: white">汽车后台管理系统</span>
                </div>
                <el-dropdown @command="handleCommand">
                    <el-avatar :src=img></el-avatar>
                    <span style="font-weight: bolder;color: white">{{userList.loginName}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">个人中心</el-dropdown-item>
                        <el-dropdown-item command="2">修改密码</el-dropdown-item>
                        <el-dropdown-item command="3">退出登录</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>

            </el-header>
            <!-- 页面主体区域 -->
            <el-container>
                <!-- 侧边栏 -->
                <!-- 侧边栏,宽度根据是否折叠进行设置 -->
                <el-aside :width="isCollapse ? '54px':'200px'">
                    <!-- 伸缩侧边栏按钮 -->
                    <div class="toggle-button" @click="toggleCollapse">|||</div>
                    <!-- 侧边栏菜单 -->
                    <el-menu
                            background-color="#333744"
                            text-color="#fff"
                            :collapse="isCollapse"
                            router
                            active-text-color="#ffd04b">
                       <NavMenu :menuData="menuList"></NavMenu>
                    </el-menu>
                </el-aside>
                <!-- 主体结构 -->
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
        <!--                个人中心-->
         <el-dialog
               title="个人中心"
               :visible.sync="UserDialog"
               width="30%"
               :before-close="handleClose1">
                     <!-- model表单数据-->
            <el-form  label-width="80px" :model="userForm" :rules="userFormRules" ref="userFormRef">
                <!--<el-avatar :src=userForm.avatar size=""></el-avatar>-->
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:80/system/user/upPicture"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :headers="{'token':token}">
                <img v-if="userForm.avatar" :src="userForm.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
                <el-form-item label="登录名" prop="loginName">
                    <el-input v-model="userForm.loginName"></el-input>
                </el-form-item>
                <el-form-item label="登陆账号" prop="userName">
                    <el-input v-model="userForm.userName" readonly></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="userForm.sex" >
                        <el-radio label="0">男</el-radio>
                        <el-radio label="1">女</el-radio>
                        <el-radio label="2">其他</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="phonenumber">
                    <el-input v-model="userForm.phonenumber"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="userForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="resetForm()">关 闭</el-button>
                        <el-button type="primary" @click="editUserBtn">确 定</el-button>
                    </span>
        </el-dialog>
        <!--                修改密码     -->
        <el-dialog
                title="修改密码"
                :visible.sync="edit"
                width="30%"
                :before-close="handleClose">
            <!-- model表单数据-->
            <el-form  label-width="80px" :model="passwordForm" :rules="passwordFormRules" ref="passwordFormRef">
                <el-form-item label="登陆账号" prop="userName">
                    <el-input v-model="passwordForm.userName" readonly></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input v-model="passwordForm.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="passwordForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="conPassword">
                    <el-input v-model="passwordForm.conPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="resetPasswordForm()">关 闭</el-button>
                        <el-button type="primary" @click="editPasswordBtn">确 定</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    //导入组件
    import NavMenu from "../components/NavMenu";
    export default {
        name: "master",
        //注册组件
        components:{
            NavMenu:NavMenu
        },
        data(){
            let validateAnotherPhone = (rule, value, callback) => {
                //查询手机号是否重复
                this.$http.post(`/system/user/selPhone`,this.userForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('手机号已存在'))
                    }

                })
            }
            let validateAnotherEmail = (rule, value, callback) => {
                //查询邮箱是否重复
                this.$http.post(`/system/user/selEmail`,this.userForm).then(function (res) {
                    if (res && res.data.result.code == '0') {

                        callback()
                    } else if (res && res.data.result.code == '1') {
                        callback(new Error('邮箱已存在'))
                    }

                })
            }
            let validatePass2=(rule, value, callback) => {
                //查询两次密码是否一致
                    if (value != this.passwordForm.newPassword) {
                        callback(new Error('两次输入密码不一致'))
                    } else {
                        callback()
                    }
            }
            return {
                //左侧导航栏展开状态
                isCollapse:true,
                //菜单信息
                menuList:[],
                //用户信息
                userList:{},
                //个人中心弹出框状态
                UserDialog:false,
                //个人中心用户表
                userForm:{},
                //token令牌
                token:'',
                //右侧头像
                img:'',
                //修改密码弹出框状态
                edit:false,
                //修改密码信息
                passwordForm:{
                    userName:'',
                    oldPassword:'',
                    newPassword:'',
                    conPassword:''
                },
                // 用户表单校验数据:
                userFormRules:{
                    phonenumber:[{ required: true, message: '手机号不可为空',trigger: 'blur'},
                        { validator: validateAnotherPhone,trigger: 'blur'}],
                    email:[{ required: true, message: '邮箱不可为空',trigger: 'blur'},
                        { validator: validateAnotherEmail,trigger: 'blur'}],

                },
                //修改密码表单校验数据
                passwordFormRules:{
                    oldPassword:[{ required: true, message: '密码不可为空',trigger: 'blur'},
                        { min:6,max:12,message: '密码必须为6-12位',trigger: 'blur'}],
                    newPassword:[{ required: true, message: '密码不可为空',trigger: 'blur'},
                        { min:6,max:12,message: '密码必须为6-12位',trigger: 'blur'}],
                    conPassword:[{ required: true, message: '密码不可为空',trigger: 'blur'},
                        { validator: validatePass2,trigger: 'blur'}],
                }
            }
        },
        created() {
            //根据token获取用户的信息
            this.userinfomation();
            //初始化菜单
            this.menu();
            this.gettoken();

        },
        methods: {

            handleCommand(command) {
                if(command==1) {
                    this.$message('欢迎您' +this.userList.loginName);

                    var that=this;
                    this.$http.get(`/system/user/selById/${this.userList.userId}`).then(function (resp) {
                        that.userForm=resp.data.result.userInfo;
                        that.UserDialog=true;
                    })

                }
                if(command==2){
                    this.passwordForm.userName=this.userList.userName;
                    this.edit=true;
                }
                if(command==3){
                    sessionStorage.clear();
                    this.$router.push({path:'/login'})

                }
            },
            toggleCollapse(){
                this.isCollapse=!this.isCollapse;
            },
            userinfomation(){
                var that=this;

                var token = sessionStorage.getItem("token");

                this.$http.get("/system/parse?token="+token).then(function (returnResult) {

                    that.userList=returnResult.data.result.userinfomation.userInfo;
                    that.img=that.userList.avatar;

                })

            },
            menu(){
                var that=this;
                this.$http.get("/system/menu/selFunction").then(function (returnResult) {
                    that.menuList=returnResult.data.result.father;
                })
            },
            resetForm(){

                this.$refs.userFormRef.resetFields();
                this.UserDialog = false;
            },
            //添加修改用户信息
            editUserBtn(){
                var that = this;

                this.$refs.userFormRef.validate((valid)=>{
                    if(valid) {//valid表示校验通过
                            this.$http.put(`/system/user/updateUserById`,this.userForm).then(function (r) {
                                that.$message.success(r.data.message);
                                that.UserDialog=false;
                            })
                        that.img=this.userForm.avatar;
                        this.$refs.userFormRef.resetFields();
                    }
                })
            },
            handleAvatarSuccess(res){
                //将上传后返回的路径赋值给imageurl
                this.userForm.avatar = res;
            },
            // 上传前格式和图片大小限制
            beforeAvatarUpload(file) {
                const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!type) {
                    this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return type && isLt2M
            },
            gettoken(){
                this.token = sessionStorage.getItem("token");


            },
            //修改密码
            editPasswordBtn(){
                var that=this;
                this.$refs.passwordFormRef.validate((valid)=>{
                    if(valid) {//valid表示校验通过
                        this.$http.post(`/system/user/upPassword`,this.passwordForm).then(function (re) {

                            if (re.data.code==2000){
                                sessionStorage.clear();
                                that.$router.push({path:'/login'})
                                that.$message(re.data.result.message);
                            }else {
                                that.$message(re.data.result.message);
                            }
                        })
                    }
                })

            },
            resetPasswordForm(){
                this.$refs.passwordFormRef.resetFields();
                this.edit = false;
            },
            handleClose1(){
                this.$refs.userFormRef.resetFields();
                this.UserDialog = false;
            },
            handleClose(){
                this.$refs.passwordFormRef.resetFields();
                this.edit = false;
            },
        }
    }
</script>

<style scoped lang="less">
    .home-box{
        height: 100%;
    }
    .home-container {
        height: 100%;
    }
    .el-header{
        background-color:#3C8DBC;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: white;
        font-size: 20px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    .el-aside{
        background-color:#333744;
        height: 100%;
        .el-menu{
            border-right: none;
        }
    }
    .el-main{
        background-color:#eaedf1;
    }
    .toggle-button{
        display: flex;
        justify-content: center;
        color: white;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>